<template>
  <div>
    <el-card class="box-card" style="right: -200px">
      <div slot="header" class="clear">
        <span>常用菜单</span>
        <el-button
          style="float: right"
          type="text"
          class="adminMenu"
          @click="dialogTableVisible = true"
          >菜单管理</el-button
        >
      </div>
      <div class="clear">
        <div
          v-for="(item, index) in getusedMenu"
          :key="index"
          class="text item"
        >
          <span class="list"
            ><el-button
              type="text"
              @click="topath(item.path)"
              style="color: #666666"
              >{{ item.menuTitle }}</el-button
            ></span
          >
        </div>
      </div>
    </el-card>

    <el-dialog
      title="菜单选项"
      :visible.sync="dialogTableVisible"
      class="clear dialog"
    >
      <span class="prompt">最多可展示9个菜单选项</span>
      <ul class="menu clear">
        <li v-for="(item, index) in getMenu" :key="index">
          <el-checkbox-group v-model="getcheckedMen">
            <el-checkbox
              :label="item.menuTitle"
              @change="change(item)"
            ></el-checkbox>
          </el-checkbox-group>
        </li>
      </ul>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUsed">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { usedPath, getMenu } from "@/util/util";
import { mapMutations, mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      usedMenu: [], //常用菜单
      Menu: [], //所有菜单
      checkedMenu: [],
      dialogTableVisible: false,
    };
  },
  methods: {
    ...mapMutations("menuRoutes", ["setRoutes", "setUsedMenu"]),
    change(item) {
      if (this.checkedMenu.includes(item.menuTitle)) {
        let index = this.checkedMenu.findIndex((v) => {
          return v == item.menuTitle;
        });
        this.checkedMenu.splice(index, 1);
        return;
      }
      if (this.checkedMenu.length == 9) {
        this.checkedMenu.splice(8, 1, item.menuTitle);
      } else {
        this.checkedMenu.push(item.menuTitle);
      }
    },
    saveUsed() {
      this.dialogTableVisible = false;
      this.usedMenu = this.Menu.filter((v) => {
        return this.checkedMenu.includes(v.menuTitle);
      });
    },
    init() {
      console.log(this.$router.options.routes);
      this.Menu = usedPath(getMenu(this.$router.options.routes)).filter(
        (v) => v.menuTitle != ""
      );
      let arr = [];
      if (this.Menu.length <= 9) {
        this.usedMenu = this.Menu;
        this.Menu.forEach((v) => {
          this.checkedMenu.push(v.menuTitle);
        });
        return;
      }
      for (let i = 0; i < 9; i++) {
        let rod = Math.floor(Math.random() * this.Menu.length);
        if (arr.includes(rod)) {
          i--;
          continue;
        }
        arr.push(rod);
        this.usedMenu.push(this.Menu[rod]);
        this.checkedMenu.push(this.Menu[rod].menuTitle);
      }
    },
    topath(path) {
      this.$router.push("/" + path.split("/").slice(2).join("/"));
      let side = path.split("/").slice(1, 2).join("/");
      this["setRoutes"](
        this.$router.options.routes.filter((v) => v.path === "/" + side)
      );
    },
  },

  created() {
    this.init();
  },
  computed: {
    ...mapState("menuRoutes", ["routeUsedMenu"]),
    ...mapGetters("menuRoutes", ["getUsedMenu"]),
    getusedMenu() {
      return this.usedMenu;
    },
    getMenu() {
      return this.Menu;
    },
    getcheckedMen: {
      get() {
        return this.checkedMenu;
      },
      set() {},
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/sass/barCard/card.scss";

.box-card ::v-deep .el-card__body {
  padding: 0;
}
.item {
  float: left;
  text-align: center;
  padding: 0;
}
.list {
  display: block;
  width: 120px;
  height: 36px;
  line-height: 36px;
  margin: 10px 6px;
}
.menu {
  width: 600px;
  margin: auto;
  & li {
    text-align: left;
    width: 120px;
    float: left;
  }
}
.dialog ::v-deep .el-dialog__body {
  padding-top: 0;
  & .prompt {
    font-size: 12px;
  }
}
.dialog ::v-deep .el-dialog__header {
  padding-bottom: 0;
}
.adminMenu {
  padding-top: 20px;
}
</style>